<template>
  <Layout class="xingyuv-default-layout default-layout">
    <LayoutSider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="slide-logo">甬能云后台管理系统</div>
      <Menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <MenuItem key="1">
          <span>nav 1</span>
        </MenuItem>
        <MenuItem key="2">
          <span>nav 2</span>
        </MenuItem>
        <MenuItem key="3">
          <span>nav 3</span>
        </MenuItem>
      </Menu>
    </LayoutSider>
    <Layout class="xingyuv-default-layout-main">
      <div>头部</div>
      <div>选项卡</div>
      <div>content</div>
      <div>footer</div>
    </Layout>
  </Layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Layout, LayoutSider, Menu, MenuItem } from 'ant-design-vue'

const collapsed = ref(false);
const selectedKeys = ref(['1']);
</script>

<style lang="less">
  .xingyuv-default-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background-color: #f4f7f9;
    .slide-logo {
      width: 100%;
      height: 48px;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      line-height: 48px;
      padding-left: 15px;
    }
    &-main {
      width: 100%;
      margin-left: 1px;
    }
  }
</style>
